<!--柱状图+折线图-->
<template>
  <div :id="id" :ref="id" :style="{height:height,width:width}"/>
</template>

<script>
import * as echarts from 'echarts'
import resize from './mixins/resize'
require('echarts/theme/macarons') // echarts theme

const animationDuration = 1000
export default {
  name:"lineBarChart",
  mixins: [resize],
  props: {
    id: {
      type: String,
      default: 'lineBarChart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    chartData: {
      type: Object,
      default: () => ({
        //y轴标题
        yTitle: [{
          type: 'value',
          name: '指标1',
          axisLabel: {
            formatter: '{value} ml'
          }
        },
          {
            type: 'value',
            name: '指标3',
            axisLabel: {
              formatter: '{value} °C'
            }
          }],
        //x轴标题
        xTitle: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
        //数据项
        dataTitle: ['指标1', '指标2', '指标3', '指标4'],
        //统计数据
        series: [
          {
            name: '指标1',
            type: 'bar',
            stack: 'Ad',
            label: {
              show: true,
              formatter: (params) => parseInt(params.value)
            },
            tooltip: {
              valueFormatter: function (value) {
                return value + ' ml'
              }
            },
            data: [
              8 * 1000, 7 * 1000, 5 * 1000, 10 * 1000, 6 * 1000, 3 * 1000, 5 * 1000
            ]
          },
          {
            name: '指标2',
            type: 'line',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + ' °C'
              }
            },
            data: [
              1 * 100, 7 * 100, 8 * 100, 5 * 100, 4 * 100, 2 * 100, 3 * 100
            ]
          },
          {
            name: '指标3',
            type: 'bar',
            stack: 'Ad',
            label: {
              show: true,
              formatter: (params) => parseInt(params.value)
            },
            tooltip: {
              valueFormatter: function (value) {
                return value + ' ml'
              }
            },
            data: [
              7 * 1000, 8 * 1000, 6 * 1000, 8 * 1000, 9 * 1000, 6 * 1000, 9 * 1000
            ]
          },
          {
            name: '指标4',
            type: 'bar',
            label: {
              show: true,
              formatter: (params) => parseInt(params.value)
            },
            tooltip: {
              valueFormatter: function (value) {
                return value + ' ml'
              }
            },
            data: [
              8 * 1000, 6 * 1000, 7 * 1000, 5 * 1000, 6 * 1000, 4 * 1000, 7 * 1000
            ]
          },
        ]
      })
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions()
      }
    }
  },
  mounted() {

  },
  beforeDestroy() {
    this.destroy()
  },
  methods: {
    /**
     * 初始化图表
     */
    initChart() {
      this.destroy()
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions()
      this.setClick()
    },
    /**
     * 更新图表数据
     */
    setOptions() {
      this.$nextTick(() => {
        let option = {
          //表格边距
          grid: {
            top: '25%',
            left: '2%',
            right: '2%',
            bottom: '3%',
            containLabel: true
          },
          //鼠标悬停提示
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          //右侧工具箱
          toolbox: {
            feature: {
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ['line', 'bar'] },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          //数据项
          legend: {
            data: this.chartData.dataTitle
          },
          //x轴数据
          xAxis: [
            {
              type: 'category',
              data: this.chartData.xTitle,
              axisPointer: {
                type: 'shadow'
              }
            }
          ],
          //y轴数据
          yAxis: this.chartData.yTitle,
          //统计数据
          series: this.chartData.series
        }
        this.chart.setOption(option)
      })
    },
    /**
     * 注册点击事件
     */
    setClick(){
      this.chart.getZr().off("click");
      let that = this
      this.chart.getZr().on("click", function (params) {
        let pointInPixel = [params.offsetX, params.offsetY];
        // 使用containPixel API判断点击位置是否在显示图形区域，下面的例子过滤了绘制图形的网格外的点击事件，好比X、Y轴lable、空白位置等的点击事件。
        if (that.chart.containPixel("grid", pointInPixel)) {
          let xIndex = that.chart.convertFromPixel({ seriesIndex: 0 }, [
            params.offsetX,
            params.offsetY,
          ])[0];
          let op = that.chart.getOption();
          //获取x轴坐标数据
          let xData=op.xAxis[0].data[xIndex]
          //获取所有y轴坐标数据
          let yData=[]
          op.series.forEach(item=>{
            yData.push({
              name:item.name,
              data:item.data[xIndex]
            })
          })
          that.$emit("onclick", xData,yData);
        }
      });
    },
    destroy() {
      if (this.chart) {
        this.chart.dispose()
        this.chart = null
      }
    }
  }
}
</script>
<style lang="less" scoped>
.Charts-common {
  position: relative;
  width: 100%;
  height: 100%;
}
</style>
